<template>
    <div 
    v-for="value in dataSource"
    :key="value.cid"
    @click='handleSelect(value)'
    :class="{ 'window':true,'active':value.cid === selected}"
    v-show='value.isShow'
    @contextmenu.stop="">
        <header
        v-windowDrag 
        class="w-header"
        style="height: 30px;"
        :data-flag="1"
        @dblclick='handleZoom(value)'>
            <div class="full-w full-h flex-between above-box">
                <div style="flex-basis: 85%;display: flex; justify-content: flex-start;align-items: center;">

                    <div class="left-icon">
                        <img :src="value.icon" draggable="false">
                    </div>

                    <div style="margin-left: 10px;font-size: 17px;">
                        <div>
                            {{value.name}}
                        </div>
                    </div>

                </div>
            
                <div style="flex-basis: 15%; display: flex; justify-content: flex-end;">
                    <div class="icon-panel" style="flex-basis: 5%; min-width: 110px;">
                        <el-icon @click='hideWindow(value)'><minus /></el-icon>
                        <el-icon @click='handleZoom(value)'><copy-document /></el-icon>
                        <el-icon @click='handleClose(value)'><close /></el-icon>
                    </div>
                </div>
            </div>
        </header>
        <div style="padding: 0px 6px 6px;height: 100%;">
            <div
            class="full-layout-1" 
            style="padding-top: 2px;"
            v-loading="loading">
                <div class="full-h">
                    <div class="full-w" style="padding:10px">
                        <div 
                        class="full-w flex-between below-box">
                            <div class="icon-panel" style="margin-right: 10px; flex-basis: 5%; min-width: 110px;">
                                <el-icon :size="25"><back /></el-icon>
                                <el-icon :size="25"><right /></el-icon>
                                <el-icon :size="25"><refresh-right/></el-icon>
                            </div>
                            <div style="flex-basis:100%">
                                <div class="flex-row">
                                    <div v-for="(item,index) in $store.state.fileNavArray" :key="index">
                                        {{item}}
                                    </div>
                                </div>
                            </div>
                            <div style="flex-basis: 25%; min-width: 150px;">
                                <el-input v-model="searchValue" placeholder="搜索文件" clearable>
                                    <template #prefix>
                                        <el-icon class="el-input__icon"><search /></el-icon>
                                    </template>
                                </el-input>
                            </div>
                        </div>
                    </div>
                    <file-manage>
                    </file-manage>
                </div>
                
              <div style="height: 100%; width: 100%; display: none; position: absolute;"></div>
            </div> 
        </div>
        
    </div>
</template>

<script>
import { reactive,toRefs,onMounted } from 'vue'
import FileManage from '@/components/FileManage'
export default {
  name: 'FileExplorer',
  components: { FileManage },
  props: {
      dataSource:{
          type:Array,
          default:null
      },
      selected:{
          type:String,
          default:''
      }
  },
  emits: ['select','zoom','hide','close'],
  setup(props,context) {
      let data = reactive({
          loading:false,
          searchValue:'',
        //   navHistory:[]
      })


      let methods = {
          handleSelect(value){
              context.emit('select',value)
          },
          handleZoom(value){
              context.emit('zoom',value)
          },
          hideWindow(value){
              context.emit('hide',value)
          },
          handleClose(value){
              context.emit('close',value)
          },
        //   addNavHistory(value){
        //       data.navHistory = value
        //   }
      }


      return {
          ...methods,
          ...toRefs(data)
      }
  }
}

</script>
<style lang='scss' scoped>
.window {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    z-index: 10;
    background-color: $white;
    overflow: hidden;
    box-shadow: 0px 0px 1px 2px #eeeeee;

    .w-header {
        padding: 2px;
        // width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -2px 8px 7px #fff;
        margin: 5px;

        .left-icon {
            height: 20px;
            width: 20px;
            min-width: 20px;
        }

    }
    &:deep(.el-loading-mask) {
        top: 70px;
    }

}

.icon-panel {
    // margin-left: 10px;
    height: 100%;

    i {
        padding: 5px;
        height: 100%;
        width: 30px;
        margin: 0 3px;
        background-color: transparent;
        border-radius: 3px;
        transition: all .2s;
        cursor: pointer;

        &:hover {
            background-color: rgba(201, 201, 201, 0.4);
        }
    }
}


.above-box {
    margin-bottom: 5px;
    justify-content:flex-start;
    height: 33px;
}

.below-box {
    justify-content:flex-start;
    margin-right: 15px;
}


.full-layout {
    height: calc(100% - 80px);
    position: relative;
}

.full-layout-1 {
    height: calc(100% - 40px);
    position: relative;
}

.active {
    z-index: 2000 !important;
}

.flex-row {
    display: flex;
    @include ellipsis(1);
    width: 600px;
}



</style>
